<template>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <li v-for="item in list" :key="item.id" @click="toDeail(item.id)">
                    <div class="itemimg">
                        <img v-lazy="item.image">
                    </div>
                    <div class="itemInfo">
                        <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
                        <p class="price">￥{{ item.price }}</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>

</template>
<script>
// import axios from 'axios'
import request from '@/utils/request';
export default {
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            pagination: 1, // 存放请求的页码
            refreshing: false, // 是否处于下拉刷新状态
        }
    },
    // created() {
    //     request.get('/list').then(res => {
    //         console.log(res, ' res')
    //         if (res.data.code == 200) {
    //             this.list = res.data.data
    //         }
    //         console.log(this.list)
    //     })
    // },
    methods: {
        onLoad() {
            // 分页请求数据
            console.log('可以加载数据了')
            // 每次调用onLoad时 先展示 加载中...
            this.loading = true;
            request.get('/list', {
                params: {
                    pagination: this.pagination, pageNum: 10
                }
            }).then(res => {
                console.log(res, ' res')
                // 数组的拼接 concat   es6 解构赋值
                // this.list = res.data.data
                // this.list = this.list.concat(res.data.data)
                this.list = [...this.list, ...res.data.data]
                this.loading = false;
                this.pagination++
                if (this.list.length >= res.data.total) {
                    this.finished = true;
                }
            })
        },
        onRefresh() {
            this.refreshing = true;
            request.get('/list', {
                params: {
                    pagination: 1, pageNum: 10
                }
            }).then(res => {
                this.list = res.data.data
                this.refreshing = false;
                this.pagination = 2;
                this.finished = false;
            })
        },
        toDeail(id) {
            console.log(id, ' id')
            // this.$router.push(`/detail/${id}`)
            this.$router.push({ path: `/detail/${id}` })
            // this.$router.push({ path: '/detail/' + id })
            // this.$router共四个方法  push  replace  go  back

        }
    }
}
</script>
<style lang="scss" scoped>
ul {
    overflow: hidden;

    li {
        width: 49%;
        float: left;
        margin: 0.5%;

        .itemimg {
            height: 166px;
            overflow: hidden;

            .van-image {
                width: 100%;
            }
        }

        .itemInfo {
            padding: 2 8px;

            .price {
                color: red;
            }
        }
    }
}
</style>